www.gusucode.com > PHP条码扫描管理系统 v1.0PHP源码程序 > PHP条码扫描管理系统 v1.0/wltmglxt_v1.0/wltmglxt_v1.0/upload/protected/modules/pandora/views/default/chat.php
<!-- RIBBON -->
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb">
<!-- This is auto generated -->
</ol>
<!-- end breadcrumb -->
<!-- You can also add more buttons to the
ribbon for further usability
Example below:
<span class="ribbon-button-alignment pull-right">
<span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span>
<span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span>
<span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span>
</span> -->
</div>
<!-- END RIBBON -->
<!-- MAIN CONTENT -->
<div id="content">
<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">
<!-- col -->
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
<h1 class="page-title txt-color-blueDark">
<!-- PAGE HEADER -->
<i class="fa-fw fa fa-comment-o"></i>
SmartChat API
</h1>
</div>
<!-- end col -->
<!-- right side of the page with the sparkline graphs -->
<!-- col -->
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
<!-- sparks -->
<ul id="sparks">
<li class="sparks-info">
<h5> My Income <span class="txt-color-blue">$47,171</span></h5>
<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
</div>
</li>
<li class="sparks-info">
<h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i> 45%</span></h5>
<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
110,150,300,130,400,240,220,310,220,300, 270, 210
</div>
</li>
<li class="sparks-info">
<h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i> 2447</span></h5>
<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
110,150,300,130,400,240,220,310,220,300, 270, 210
</div>
</li>
</ul>
<!-- end sparks -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->
<!-- widget grid -->
<section id="widget-grid" class="">
<div class="alert alert-warning">
<strong>Description:</strong> This is a jQuery UI plugin serves as the front end of a simple Comet chat server. It is a pure UI plugin so you can easily plug it into whatever communication protocol of your choice.
</div>
<!-- row -->
<div class="row">
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget well" id="wid-id-0">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header>
<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
<h2>Widget Title </h2>
</header>
<!-- widget div-->
<div>
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
<input class="form-control" type="text">
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body">
<!-- this is what the user will see -->
<h5>Here are the few options you can customize for your chat box:</h5>
<img src="/public/pandora/img/demo/chat.png" alt="Chat" class="bordered img-responsive" style="margin-bottom:10px;">
<br>
<div class="alert alert-info">
In the box below we will capture every chat window opened. Try to open the chat windows by clicking on the left chat users. You will notice all the chats being logged below.
</div>
<div id="chatlog" style="height: 300px; border:1px dashed #333; overflow-x: auto" class="padding-10 custom-scroll">
<p><i><- Type in your chat window and see this chat log update</i></p>
</div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</article>
<!-- WIDGET END -->
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget well" id="wid-id-1">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header>
<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
<h2>Widget Title </h2>
</header>
<!-- widget div-->
<div>
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
<input class="form-control" type="text">
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body">
<!-- this is what the user will see -->
<h5>Here are the few options you can customize for your chat box:</h5>
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #000000">options</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #000000; font-weight: bold">{</span>
<span style="color: #000000">id</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">//id for the DOM element</span>
<span style="color: #000000">title</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// title of the chatbox</span>
<span style="color: #000000">user</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// can be anything associated with this chatbox</span>
<span style="color: #000000">hidden</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">false</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// show or hide the chatbox</span>
<span style="color: #000000">offset</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">0</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// relative to right edge of the browser window</span>
<span style="color: #000000">width</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">230</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// width of the chatbox</span>
<span style="color: #000000">messageSent</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">){</span>
<span style="color: #8f5902; font-style: italic">// override this</span>
<span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">boxManager</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">addMsg</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">first_name</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">);</span>
<span style="color: #000000; font-weight: bold">},</span>
<span style="color: #000000">boxClosed</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">)</span> <span style="color: #000000; font-weight: bold">{},</span> <span style="color: #8f5902; font-style: italic">// called when the close icon is clicked</span>
<span style="color: #000000; font-weight: bold">...</span>
<span style="color: #000000; font-weight: bold">}</span>
</pre></div>
<br>
<h5>To create a chatbox at the bottom of the browser window with an offset of 200px to the right edge, use the following code:</h5>
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87">document</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">ready</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(){</span>
<span style="color: #8f5902; font-style: italic">// to create</span>
<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">({</span><span style="color: #000000">id</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">"chat_div"</span><span style="color: #000000; font-weight: bold">,</span>
<span style="color: #000000">title</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">"Title"</span><span style="color: #000000; font-weight: bold">,</span>
<span style="color: #000000">user</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">"can be anything"</span>
<span style="color: #000000">offset</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">200</span><span style="color: #000000; font-weight: bold">,</span>
<span style="color: #000000">messageSent</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">){</span>
<span style="color: #000000">alert</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"DOM "</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #000000">id</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #4e9a06">" just typed in "</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">);</span>
<span style="color: #000000; font-weight: bold">}});</span>
<span style="color: #8f5902; font-style: italic">// to insert a message</span>
<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"option"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"boxManager"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">addMsg</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"Mr. Foo"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"Barrr!"</span><span style="color: #000000; font-weight: bold">);</span>
<span style="color: #000000; font-weight: bold">});</span>
</pre></div>
<br>
<h5>Use the following standard jQuery UI approach to access the options after the chat box is created:</h5>
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"> <span style="color: #000000; font-weight: bold">...</span>
<span style="color: #8f5902; font-style: italic">// getter</span>
<span style="color: #204a87; font-weight: bold">var</span> <span style="color: #000000">offset</span> <span style="color: #ce5c00; font-weight: bold">=</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"option"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"offset"</span><span style="color: #000000; font-weight: bold">);</span>
<span style="color: #8f5902; font-style: italic">// setter, to change the possition of the chatbox</span>
<span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"#chat_div"</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">"option"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">"offset"</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #0000cf; font-weight: bold">300</span><span style="color: #000000; font-weight: bold">);</span>
</pre></div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</article>
<!-- WIDGET END -->
</div>
<!-- end row -->
<!-- row -->
<div class="row">
<!-- a blank row to get started -->
<div class="col-sm-12">
<!-- your contents here -->
</div>
</div>
<!-- end row -->
</section>
<!-- end widget grid -->
</div>
<!-- END MAIN CONTENT -->